<template>
  <el-dialog
    title="Collecting, please wait..."
    :show-close="false"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <el-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="percentage"
      :status="status"
    />
    <p class="gather-status">
      <span>Success：{{ success }}</span>
      <span>Error：{{ error }}</span>
    </p>
    <span slot="footer" class="dialog-footer" />
  </el-dialog>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      required: true,
      default: 50
    },
    success: {
      type: Number,
      required: true,
      default: 50
    },
    error: {
      type: Number,
      required: true,
      default: 50
    }
  },
  data() {
    return {
      dialogVisible: true,
      percentage: 0,
      intervalId: null,
      status: 'success'
    };
  },
  watch: {
    percent() {
      // this.percentage = this.percent;
      if (this.percent === 100) {
        this.percentage = this.percent;
        clearInterval(this.intervalId); // 清除计时器
        this.intervalId = null; // 设置为null
        var that = this;
        setTimeout(function() {
          that.dialogVisible = false;
          that.$emit('loadClose', false);
        }, 2000);
      }
      if (this.percent === -1) {
        this.status = 'warning';
        clearInterval(this.intervalId); // 清除计时器
        this.intervalId = null; // 设置为null
        var _that = this;
        this.percentage = 20;
        setTimeout(function() {
          _that.dialogVisible = false;
          _that.$emit('loadClose', false);
        }, 1000);
      }
    }
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.percentage += 1;
      if (this.percentage === 90) {
        clearInterval(this.intervalId); // 清除计时器
        this.intervalId = null; // 设置为null
      }
    }, 500);
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.gather-status {
  text-align: center;
  margin-top: 20px;
  color: #676767;
}
.gather-status span:nth-child(1) {
  color: #67c23a;
  padding-right: 20px;
}
.gather-status span:nth-child(2) {
  color: red;
}
</style>
